<template>
  <div class="play">
    <!-- audio -->
    <audio :src="musicUrl" v-on:timeupdate="timeUpdate" loop v-on:canplay="canPlay" ref="audio" hidden></audio>
    <!-- 播放的歌曲的信息 -->
    <div class="info">
      <h3 class="songs_t">{{musicDetail.name}}</h3>
      <div class="singer_name">{{musicDetail.artName}}</div>
    </div>
    <!-- 背景指针 -->
    <div class="needle">
      <img src="../../image/needle-ab.png" alt="">
    </div>
    <!-- 下滑 -->
    <div class="down">
      <van-icon class="down_ani down_ani1" name="arrow-down" color="#fff" size="22"/>
      <van-icon class="down_ani down_ani2" name="arrow-down" color="#fff" size="22"/>
      <van-icon class="down_ani down_ani3" name="arrow-down" color="#fff" size="22"/>
      <van-icon class="down_ani down_ani4" name="arrow-down" color="#fff" size="22"/>
    </div>
    <!-- 背景胶片 包含点击播放和暂停 -->
    <div class="box">
      <div v-on:click="isPlaying = !isPlaying" :class="['qiehuan_stop_play',!isPlaying?'plays':'stops']"></div>
      <div :class="['playing',isPlaying?'playings':'playings movePause']">
        <div class="img">
          <van-image width="100%" height="100%" :src="musicDetail.alPic" />
        </div>
        <img width="100%" height="100%" src="../../image/disc.png" alt="">
      </div>
    </div>
    <!-- 歌词 -->
    <div class="lrc">
      <ul ref="lrc">
        <li v-for="(item,index) in musicLrc" :class="index==cindex?'current':''" :key="index">{{item.text}}</li>
      </ul>
    </div>
    <!-- 更多 -->
    <div :class="['top',isTops?'isTop':'']">
      <span class="click" v-on:click="isTops = !isTops"></span>
      <van-tabs v-model="active">
        <van-tab title="相关歌单">
          <div class="moreGedan_c">
            <ul>
              <li v-for="(item) in xiangGuanGedanList" :key="item.id" v-on:click="$router.push(`/gedandetail?id=${item.id}`)">
                <van-image width="100%" height="100%" :src="item.coverImgUrl"></van-image>
                <span>{{item.name}}</span>
              </li>
            </ul>
          </div>
        </van-tab>
        <van-tab title="相似歌曲">
          <div class="moreGeqv">
            <ul>
              <li v-for="(item) in musicList" :key="item.id" v-on:click="$router.push(`/play?id=${item.id}`)">
                <span>{{item.name}}</span>
                <span>{{item.artists[0].name}}</span>
              </li>
            </ul>
          </div>
        </van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
import { getGequurl, getGequDetail, getXiangguanGeDan, getXiangsiGeqv, getGeci } from '../../../utils/api';
export default {
  data () {
    return {
      // 当前激活的更多的菜单索引
      active: 0,
      // 是否显示更多
      isTops: false,
      // 是否正在播放
      isPlaying: true,
      // 当前正在播放的音乐url
      musicUrl: '',
      // 当前正在播放的歌曲的详情
      musicDetail: {
        name: '',
        artName: '',
        alPic: ''
      },
      // 当前歌曲相关歌单
      xiangGuanGedanList: [],
      // 当前歌曲相似歌曲
      musicList: [],
      // 歌词数组
      musicLrc: [],
      // 当前激活的歌词索引
      cindex: 0
    }
  },
  methods: {
    // 获取歌曲播放地址和歌曲详情和相关歌单和相似歌曲
    async getGequFn (id) {
      let result = await getGequurl(id);
      let result2 = await getGequDetail(id);
      let result3 = await getXiangguanGeDan(id);
      let result4 = await getXiangsiGeqv(id);
      if (result.code === 200 && result2.code === 200 && result3.code === 200 && result4.code === 200) {
        this.musicUrl = result.data[0].url;
        this.musicDetail.name = result2.songs[0].name;
        this.musicDetail.artName = result2.songs[0].ar[0].name;
        this.musicDetail.alPic = result2.songs[0].al.picUrl;
        this.xiangGuanGedanList = result3.playlists;
        this.musicList = result4.songs;
      }
    },
    // 获取歌词
    async getGeciFn (id) {
      let result = await getGeci(id);
      if (result.code === 200 && result.lrc !== undefined) {
        this.formatLrc(result.lrc.lyric);
      }
    },
    // 解析歌词
    formatLrc (lrc) {
      let arr = lrc.split('\n');
      let narr = [];
      let reg = /\[(.*)\](.*)/;
      for (var i = 0; i < arr.length; i++) {
        let n = reg.exec(arr[i]);
        if (n !== null && n[2] !== '') {
          narr.push({
            time: String(((n[1].substr(0, 5).split(':')[0] * 60) - 0) + ((n[1].substr(0, 5).split(':')[1]) - 0)),
            text: n[2]
          })
        }
      }
      this.musicLrc = narr;
    },
    // 当音乐可以播放时
    canPlay () {
      // 当可以播放时直接播放 因为初始化时已将isPlaying设置为true
      if (this.isPlaying) {
        this.$refs.audio.play();
      }
    },
    // 当音乐播放时
    timeUpdate () {
			// 遍历歌词 改变当前激活歌词的索引
      this.musicLrc.forEach((item, index) => {
        if (this.$refs.audio !== undefined) {
          if (Number(item.time) < this.$refs.audio.currentTime) {
            this.cindex = index;
            this.$refs.lrc.style.transform = "translateY(-" + index * 1.2 + "rem)";
          }
        }
      })
    }
  },
  mounted () {
    // 返回顶部
    window.scroll(0, 0);
    // 获取
    this.getGequFn(this.$route.query.id);
    this.getGeciFn(this.$route.query.id);
  },
  // 侦听器
  watch: {
    // 监听是否播放 执行对应的操作
    isPlaying: function (newV) {
      if (newV === false) {
        this.$refs.audio.pause();
      } else {
        this.$refs.audio.play();
      }
    }
  }
}

</script>

<style lang="less" scoped>
@import '../../css/vars.less';
@keyframes move {
	0% { 
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
@keyframes down_ani {
	0% { 
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}
.play{
	padding-top: 100/50rem;
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #252a40;
	.movePause{
		animation-play-state: paused !important;
	}
	.box{
		position: relative;
		.qiehuan_stop_play{
			width: 150/50rem;
			height: 150/50rem;
			border-radius:50%;
			background-repeat: no-repeat;
			position: absolute;
			top: 50%;
			background-size: 100% 100%;
			z-index: 2;
			left: 50%;
			transform: translate(-50%,-50%);
		}
		.stops{
			background-image: url('');
		}
		.plays{
			background-image: url('');
		}
	}
	.isTop{
		transform: translateY(-60%);
	}
	.top{
		width: 100%;
		padding-top: 0.5rem;
		position: absolute;
		left: 0;
		bottom: -90%;
		transition: all 0.8s;
		z-index: 2;
		height: 110vh;
		overflow: hidden;
		background-color: @backWhite;
		border-radius: 50/50rem 50/50rem 0 0;
		.click{
			display: inline-block;
			width: 180/50rem;
			height: 20/50rem;
			position: absolute;
			background-color: rgba(0,0,0,.1);
			top: 5/50rem;
			border-radius: 10/50rem;
			left: 50%;
			margin-left: -90/50rem;
		}
	}
	.songs_t{
		color: #fff;
		margin: 0;
		text-align: center;
		margin-top: 30/50rem;
		font-weight: 550;
		font-size: 0.95rem;
	}
	.singer_name{
		margin-top: 25/50rem;
		font-size: 30/50rem;
		color: #fff;
		text-align: center;
	}
	.playing{
		width: 520/50rem;
		height: 520/50rem;
		margin: 30/50rem auto 0;
		position: relative;
		.img{
			position: absolute;
			width: 350/50rem;
			height: 350/50rem;
			top: 50%;
			left: 50%;
			margin-top: -175/50rem;
			margin-left: -175/50rem;
			overflow: hidden;
			border-radius: 50%;
		}
	}
	.playings{
		animation: move 6s linear infinite;
	}
	.needle{
		position: absolute;
		left: 80/50rem;
		top: 230/50rem;
		z-index: 1;
		img{
			width: 150/50rem;
			height: 230/50rem;
		}
	}
}
.van-tabs{
	/deep/ .van-tab{
		height: 80/50rem;
	}
	/deep/ .van-tab__text{
		font-size: 35/50rem;
		line-height: 1.3;
	}
	/deep/ .van-tabs__wrap{
		height: 80/50rem;
	}
	/deep/ .van-tabs__line{
		width: 80/50rem;
	}
	/deep/ .van-tab__pane{
		margin-top: 30/50rem;
	}
}
.moreGedan_c{
  margin-top: 10/50rem;
  ul{
    white-space: nowrap;
    height: 260/50rem;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 20/50rem 0 20/50rem 20/50rem;
    background-color: @backWhite;
    &::-webkit-scrollbar { width: 0 !important }
    li{
      height: 5rem;
      width: 5rem;
      margin-right: 20/50rem;
      display: inline-block;
      border-radius: 30/50rem;
      overflow: hidden;
      position: relative;
      span{
        position: absolute;
        background-color: rgba(0,0,0,.5);
        left: 0;
        bottom: 0;
        font-size: 0.65rem;
        color: @backWhite;
        overflow: hidden;
        text-align: center;
        width: 5rem;
        height: 1.6rem;
        display: -webkit-box;
        white-space: normal !important;
        text-overflow: ellipsis;
        word-wrap: break-word;
        -webkit-line-clamp: 2; 
        -webkit-box-orient: vertical;
        line-height: 1.2;
     }
    }
  }
}
.moreGeqv{
 ul{
   background-color: @backWhite;
   padding-bottom: 10/50rem; 
   li{
     height: 1.8rem;
     padding: 20/50rem;
     display: flex;
     flex-direction: column;
     position: relative;
     justify-content: space-around;
     &::after{
       position: absolute;
       content: '';
       pointer-events: none;
       right: 20/50rem;
       bottom: 0;
       left: 20/50rem;
       border-bottom: 1px solid #ebedf0;
       -webkit-transform: scaleY(.5);
       transform: scaleY(.5);
     }
     &::before{
       content: "";
       position: absolute;
       right: 0;
       top: 50%;
       width: 0;
       height: 0;
       transform: translateY(-50%);
       display: inline-block;
       border: 20/50rem solid transparent;
       border-left-color: #ccc;
       margin-right: 30/50rem;
     }
     span:nth-child(1){
       font-size: 0.7rem;
     }
     span:nth-child(2){
       color: #888;
       font-size: 28/50rem;
     }
   }
 }
}
.lrc{
	width: 100%;
	height: 180/50rem;
	color: #ccc;
	text-align: center;
	overflow: hidden;
	font-size: 35/50rem;
	margin-top: 45/50rem;
	ul{
		transform: translateY(0rem);
		transition: all 0.5s;
		height: 100%;
	}
	li{
		height: 50/50rem;
		line-height: 50/50rem;
		margin-bottom: 10/50rem;
	}
	.current{
		color: #fff;
		font-size: 40/50rem;
	}
}
.down{
  position: absolute;
  right: 10/50rem;
  display: flex;
  bottom: 300/50rem;
  flex-direction: column;
}
.down_ani{
  animation: down_ani 0.8s linear infinite;
}
.down_ani1{
  animation-delay: 0.1s;
}
.down_ani2{
  animation-delay: 0.3s;
}
.down_ani3{
  animation-delay: 0.6s;
}
.down_ani4{
  animation-delay: 0.9s;
}
</style>